<template>
<div class="add-connect-form-wrapper">
    <Spin size="large" fix v-if="loading"></Spin> <!-- 加载动画 -->
    <Form ref="dsConnectForm" :model="dsConnect" :label-width="80" label-position="left">
        <FormItem label="连接名称" prop="connectName" :rules="{required: true,message: '请输入连接名称！'}">
            <Input placeholder="连接名称" clearable class="normal-input" v-model="dsConnect.connectName"></Input>
        </FormItem>
        <FormItem label="连接类型" prop="connectType" v-if="typeNeed" :rules="{required: true,message: '请选择连接类型！'}">
            <RadioGroup v-model="dsConnect.connectType" type="button">
                <Radio label="mysql">MySQL</Radio>
                <Radio label="oracle">Oracle</Radio>
                <Radio label="sqlserver">SQLServer</Radio>
                <Radio label="hive">Hive</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="服务器" :required="true" >
            <FormItem prop="connectHost" class="host-input" :rules="{required: true,message: '请输入连接地址！'}">
                <Input placeholder="连接地址" clearable v-model="dsConnect.connectHost"></Input>
            </FormItem>
            <span class="pull-left ">&nbsp;:&nbsp;</span>
            <FormItem prop="connectPort" class="port-input" :rules="{required: true,message: '请输入端口号！'}">
                <Input placeholder="端口号"  clearable v-model="dsConnect.connectPort"></Input>
            </FormItem>
        </FormItem>
        <FormItem label="数据库" prop="databaseName" :rules="{required: true,message: '请输入数据库！'}">
            <Input placeholder="数据库" clearable class="normal-input" v-model="dsConnect.databaseName"></Input>
        </FormItem>
        <FormItem label="用户名" prop="userName" :rules="{required: true,message: '请输入用户名！'}">
            <Input placeholder="用户名" clearable class="normal-input" v-model="dsConnect.userName"></Input>
        </FormItem>
        <FormItem label="密码" prop="password" :rules="dsConnect.connectType == 'hive'? {}:{required: true,message: '请输入密码！'}">
            <Input placeholder="密码" type="password" class="normal-input" clearable v-model="dsConnect.password"></Input>
        </FormItem>
        <Form-item label="备注" prop="remark">
            <Input placeholder="备注" clearable type="textarea" class="normal-input" :rows="2" v-model="dsConnect.remark"></Input>
        </Form-item>
    </Form>
    <Alert type="error" show-icon v-if="errorMsgShow"> 连接失败，请检查连接配置！</Alert>
    <Alert type="success" show-icon v-if="successShow"> 连接成功！</Alert>
</div>
</template>

<script>
import getData from 'getData'
export default {
    props: {
        dsConnect: {
            type: Object,
            required: true
        },
        typeNeed: {
            type: Boolean,
            default: true
        }
    },

    data () {
        return {
            successShow: false,
            errorMsgShow: false,
            loading: false,
            tested: false,
        }
    },
    watch: {
        dsConnect: {
            deep: true,
            handler(val) {
                this.tested = false;
            }
        }
    },

    methods: {
        save(callback) {
            if (this.tested) {
                this.loading = true;
                getData.post('saveDsConnect', this.dsConnect).then(res => {
                    this.loading = false;
                    callback(res);
                });
            } else {
                this.test(res => {
                    if (res && res.data.data) {
                        this.loading = true;
                        getData.post('saveDsConnect', this.dsConnect).then(res => {
                            this.loading = false;
                            callback(res);
                        });
                    } else {
                        callback();
                    }
                })
            }
        },
        test(callback) {
            this.$refs.dsConnectForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    getData.post('testDsConnect', this.dsConnect).then(res => {
                        this.loading = false;
                        if (res.status == 200 && res.data.data) {
                            this.successShow = true;
                            this.errorMsgShow = false;
                            this.tested = true;
                            callback(res);
                        } else {
                            this.successShow = false;
                            this.errorMsgShow = true;
                            callback();
                        }
                    });
                }
                callback();
            });
        },
        resetFields() {
            this.$refs.dsConnectForm.resetFields();
        }
    }
}
</script>

<style lang="less">
.add-connect-form-wrapper {
    position: relative;
    .normal-input {
        width: 98%;
    }

    .host-input {
        width: 68%;
        float: left;
    }
    .port-input {
        width: 27%;
        float: left;
    }
}
</style>
